<template>
  <div class="app_wrap">
    <el-card style="height: 100%">
      <!-- 头部 -->
      <el-button
        type="primary"
        style="margin-bottom: 14px"
        @click="addOrEditClick({ id: 0 })"
      >
        <el-icon style="margin-right: 6px">
          <Plus />
        </el-icon>
        添加
      </el-button>
      <!-- 数据表格 -->
      <el-table :data="studentList" :border="true" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" align="center" />
        <el-table-column prop="studentName" label="姓名" align="center" />
        <el-table-column prop="age" label="年龄" align="center" />
        <el-table-column prop="sex" label="性别" align="center" />
        <el-table-column prop="phone" label="联系方式" align="center" />
        <el-table-column prop="address" label="地址" align="center" />
        <el-table-column label="操作" width="250" align="center">
          <template #default="scope">
            <el-button type="primary" @click="addOrEditClick(scope.row)">
              <el-icon style="margin-right: 6px">
                <Edit />
              </el-icon>
              编辑
            </el-button>
            <el-popconfirm
              title="确定要删除此学生信息吗?"
              @confirm="delStudentClick(scope.row.id)"
              @cancel="() => {}"
            >
              <template #reference>
                <el-button type="danger">
                  <el-icon style="margin-right: 6px">
                    <Delete />
                  </el-icon>
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加和编辑的弹窗组件 -->

    <el-dialog
      v-model="isShowAddOrEditDialog"
      :title="`${isAdd ? '添加' : '编辑'}数据`"
    >
      <el-form :model="addOrEditFormData">
        <el-form-item label="姓名" label-width="100">
          <el-input
            v-model="addOrEditFormData.studentName"
            autocomplete="off"
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item label="年龄" label-width="100">
          <el-input-number
            :min="1"
            :max="30"
            v-model="addOrEditFormData.age"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="性别" label-width="100">
          <el-radio-group v-model="addOrEditFormData.sex" class="ml-4">
            <el-radio label="男" size="large">男</el-radio>
            <el-radio label="女" size="large">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系方式" label-width="100">
          <el-input
            v-model="addOrEditFormData.phone"
            autocomplete="off"
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item label="地址" label-width="100">
          <el-input
            v-model="addOrEditFormData.address"
            autocomplete="off"
            style="width: 250px"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelClick">取消</el-button>

          <el-button type="primary" @click="okClick"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
export default defineComponent({
  name: "App",
});
</script>
<script lang="ts" setup>
import {
  getStudentListApi,
  delStudentApi,
  addStudentApi,
  editStudentApi,
} from "@/api/index.ts";
import { StudentListType, StudentType } from "@/api/type/index.ts";
import { ElMessage } from "element-plus";

// 添加和编辑的表单数据
const addOrEditFormData = ref({
  studentName: "",
  age: 18,
  sex: "",
  phone: "",
  address: "",
});

// 当前是添加还是编辑的标识
const isAdd = ref(true);

// 当前编辑的id
const currentEditId = ref(0);

// 弹窗取消点击事件
const cancelClick = () => {
  isShowAddOrEditDialog.value = false;
};

// 弹窗确定点击事件
const okClick = async () => {
  if (isAdd.value) {
    let data = addOrEditFormData.value;
    await addStudentApi(data)
      .then(() => {
        ElMessage.success("添加成功");
      })
      .catch(() => {
        ElMessage.success("添加失败");
      });
  } else {
    let data = {
      id: currentEditId.value,
      ...addOrEditFormData.value,
    };

    await editStudentApi(data)
      .then(() => {
        ElMessage.success("编辑成功");
      })
      .catch(() => {
        ElMessage.success("编辑失败");
      });
  }
  getStudentListFunc();
  isShowAddOrEditDialog.value = false;
};

// 控制添加和编辑弹窗显示的标识
const isShowAddOrEditDialog = ref(false);

// 添加和编辑的点击事件
const addOrEditClick = (row: any) => {
  addOrEditFormData.value = {
    studentName: "",
    age: 18,
    sex: "",
    phone: "",
    address: "",
  };
  if (row.id == 0) {
    isAdd.value = true;
  } else {
    isAdd.value = false;
    addOrEditFormData.value.studentName = row.studentName;
    addOrEditFormData.value.age = row.age;
    addOrEditFormData.value.sex = row.sex;
    addOrEditFormData.value.phone = row.phone;
    addOrEditFormData.value.address = row.address;
    currentEditId.value = row.id;
  }

  isShowAddOrEditDialog.value = true;
};

// 删除学生信息的点击事件
const delStudentClick = async (id: number) => {
  await delStudentApi({ id: id })
    .then((res) => {
      console.log(res);
    })
    .then(() => {
      ElMessage({
        message: "删除成功!",
        type: "success",
      });
      getStudentListFunc();
    })
    .catch(() => {
      ElMessage({
        message: "删除失败!",
        type: "error",
      });
    });
};

// 学生信息列表数据
const studentList = ref<StudentListType>([]);

// 获取学生信息的函数
const getStudentListFunc = async () => {
  await getStudentListApi().then((res) => {
    studentList.value = res.data;
  });
};
// 初始化
onMounted(() => {
  getStudentListFunc();
});
</script>

<style lang="scss" scoped>
.app_wrap {
  padding: 14px;
  height: 96vh;
}
</style>
